<template>
  <div id="container5" ref="svvg">
    <svg width="500" height="500" id="svvg" ref="svg">
      <rect
        width="500"
        height="500"
        style="fill: none; stroke-width: 1; stroke: rgb(0, 0, 0)"
      />
      <g transform="translate(100,100) scale(0.5)">
        <rect
          x="200"
          y="200"
          width="100"
          height="100"
          style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0)"
        />
      </g>
      <g transform="translate(5,5) scale(1) rotate(20)">
        <ellipse
          cx="100"
          cy="80"
          rx="100"
          ry="50"
          style="fill: yellow; stroke: purple; stroke-width: 2"
        />
      </g>
      <!-- <g
        transform="translate(43.645584664054695,14.240855419087325) scale(0.8681402276010433) translate(43.645584664054695,14.240855419087325) scale(0.8681402276010433)"
      >
        <ellipse
          cx="300"
          cy="80"
          rx="100"
          ry="50"
          style="fill: yellow; stroke: purple; stroke-width: 2"
        />
      </g> -->
    </svg>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  data: function () {
    return {
      zoom: 1,
      mouseX: null,
      mouseY: null,
      offsetX: null,
      offsetY: null,
      translateX: 0,
      translateY: 0,
      transform: null,
    };
  },
  mounted() {
    this.zooming1();
    // this.zooming2();
    // this.zooming3();
  },
  methods: {
    zooming1() {
      const svg = d3.select("#svvg");
      let that = this;

      svg.call(
        d3
          .zoom()
          .extent([
            [0, 0],
            [648, 480],
          ])
          .scaleExtent([0.5, 100])
          .on("zoom", function ({ transform }) {
            that.setTrans(transform);
            // that.setSvgTrans(transform);
          })
      );
    },
    setSvgTrans(transform) {
      let svgDom = d3.select("#svvg");
      console.log(transform, svgDom);
      svgDom.attr("transform", function (d) {
        return `translate(${transform.x},${transform.y}) scale(${transform.k}) rotate(0)`;
      });
    },
    setTrans(transform) {
      console.log(transform);
      let group = d3.selectAll("g");
      let that = this;
      group._groups[0].forEach((g) => {
        let translate = [0, 0];
        let translateX = 0;
        let translateY = 0;
        let scale = 1;
        let rotate = 0;
        let NewScale = transform.k;
        let NewTransformX = transform.x;
        let NewTransformY = transform.y;

        // 首次记录参数
        if (!g.getAttribute("trans")) {
          let existingTransform = g.getAttribute("transform");
          if (existingTransform.indexOf("scale") != -1) {
            scale = existingTransform
              .match(/scale\([^)]+\)/)[0]
              .replace(/scale\(/, "")
              .replace(/\)/, "");
          }
          if (existingTransform.indexOf("translate") != -1) {
            translate = existingTransform
              .match(/translate\([^)]+\)/)[0]
              .replace(/translate\(/, "")
              .replace(/\)/, "")
              .split(",");
          }
          if (existingTransform.indexOf("rotate") != -1) {
            rotate = existingTransform
              .match(/rotate\([^)]+\)/)[0]
              .replace(/rotate\(/, "")
              .replace(/\)/, "")
              .split(",");
          }
          translateX = translate[0];
          translateY = translate[1];
          // 首次记录参数
          g.setAttribute(
            "trans",
            `${scale},${translateX},${translateY},${rotate}`
          );
        } else {
          let trans = g.getAttribute("trans").split(",");
          scale = trans[0];
          translateX = trans[1];
          translateY = trans[2];
          rotate = trans[3];
        }
        NewScale = transform.k * scale;
        NewTransformX = transform.x * 1 + translateX*transform.k * 1;
        NewTransformY = transform.y * 1 + translateY*transform.k * 1;
        console.log("每个", g);
        g.setAttribute(
          "transform",
          `translate(${NewTransformX},${NewTransformY}) scale(${NewScale}) rotate(${rotate})`
        );
      });
    },
    zooming2() {
      const svg = d3.select("#svvg");

      svg.call(
        d3
          .zoom()
          .extent([
            [0, 0],
            [648, 480],
          ])
          .scaleExtent([0.5, 100])
          .on("zoom", zoomed)
      );

      function zoomed({ transform }) {
        let group = d3.selectAll("g");
        //   let arr  = existingTransform.split(" ");
        group.attr("transform", transform);
      }
    },
    zooming3() {
      // 选择 <g> 元素
      var group = d3.select("g");

      // 获取已有的 transform 信息
      var existingTransform = group.attr("transform");

      // 创建一个缩放行为
      var zoom = d3
        .zoom()
        // 设置缩放范围，这里设置为0.5到5倍
        .scaleExtent([0.5, 5])
        // 设置缩放事件的回调函数
        .on("zoom", function () {
          // 获取缩放变换信息
          var newTransform = d3.event.transform;

          // 将新的缩放变换与已有的 transform 叠加
          var combinedTransform = existingTransform + " " + newTransform;

          // 将叠加后的 transform 应用到 <g> 元素
          group.attr("transform", combinedTransform);
        });

      // 将缩放行为应用到 <g> 元素上
      group.call(zoom);
    },
    zooming4(e) {
      let event = e || window.event;
      console.log(1);
      event.preventDefault(); // 阻止默认滚动行为

      const zoomIntensity = 0.1; // 缩放增量
      const delta = Math.sign(event.deltaY); // 获取滚动方向

      // 设置鼠标位置
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;

      // 计算新的缩放比例
      const newZoom = this.zoom + delta * zoomIntensity;

      let svvgDom = this.$refs.svvg;
      // 计算缩放前鼠标在容器中的位置
      const containerX = this.mouseX;
      const containerY = this.mouseY;

      // 计算缩放之后鼠标在容器中的位置
      const scaledContainerX = containerX * (newZoom / this.zoom);
      const scaledContainerY = containerY * (newZoom / this.zoom);

      // 计算容器位置需要调整的偏移量
      this.offsetX = containerX - scaledContainerX;
      this.offsetY = containerY - scaledContainerY;

      this.zoom = newZoom;

      svvgDom.style.transformOrigin = `${this.mouseX}px ${this.mouseY}px`;
      console.log(this.mouseX, this.mouseY);
      console.log(this.$refs.svg.style.offsetLeft);

      // 应用缩放和偏移样式
      svvgDom.style.transform = `scale(${this.zoom}) translate(${this.offsetX}px, ${this.offsetY}px)`;
    },
  },
};
</script>

<style>
</style>